<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<!-- 循环渲染轮播图的 item 项 -->
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<!-- 动态绑定图片的 src 属性 -->
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分类导航区域 -->
		<view class="nav_list">
			<u-grid :col="3">
					<u-grid-item @click='linkvipmonth()'>
						<u-icon name="integral-fill" :size="46" color="#fe8a0d" ></u-icon>
						<view class="grid-text">月卡</view>
					</u-grid-item>
					<u-grid-item @click='linkvipyear()'>
						<u-icon name="coupon-fill" :size="46" color="#fa3534"></u-icon>
						<view class="grid-text">年卡</view>
					</u-grid-item>
					<u-grid-item @click="linkuserpay()">
						<u-icon name="weixin-circle-fill" :size="42" color="#1AAD19"></u-icon>
						<view class="grid-text">支付</view>
					</u-grid-item>
				</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [], //轮播图的数据列表，默认为空数组
			    car_number:'',//车牌号
			}
		},
		onLoad(options) {
			this.car_number = options.car_number; //接受车牌号参数
			this.getSwiperList() // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
		},
		methods: {
			// 3. 获取轮播图数据的方法
			async getSwiperList() {
				// 3.1 发起请求
				const {
					data: res
				} = await uni.$http.get('/comment/get/swiper')
				// 3.2 请求失败
				if (res.code !== 200) {
					return uni.showToast({
						title: '数据请求失败！',
						duration: 1500,
						icon: 'none',
					})
				}
				// 3.3 请求成功，为 data 中的数据赋值
				this.swiperList = res.data
			},
			// 点击月卡跳转到开通月卡的页面
			linkvipmonth(){
				uni.navigateTo({
				  url: '/unpackage/vipmonth/vipmonth?car_number='+this.car_number+''
				})
			},
			// 点击年卡跳转到开通年卡的页面
			linkvipyear(){
				uni.navigateTo({
				  url: '/unpackage/vipyear/vipyear?car_number='+this.car_number+''
				})
			},
			// 点击支付跳转到支付出库页面
			linkuserpay(){
				uni.navigateTo({
				  url: '/unpackage/userpay/userpay?car_number='+this.car_number+''
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	swiper {
		height: 370rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav_list {
		display: flex;
		// justify-content: space-around;
		margin: 15px 10px;

	}
</style>